<template>
  <van-tabbar v-model="$store.state.TabBarActive">
    <van-tabbar-item icon="music-o" @click="toRoute(0)">音乐欣赏</van-tabbar-item>
    <van-tabbar-item icon="newspaper-o" @click="toRoute(1)"
      >随机新闻</van-tabbar-item
    >
    <van-tabbar-item icon="notes-o" @click="toRoute(2)"
      >随机古诗</van-tabbar-item
    >
    <van-tabbar-item icon="smile-o" @click="toRoute(3)"
      >随机美图</van-tabbar-item
    >
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    toRoute(id) {
      this.$store.commit("changeTabBarActive", id);
      if (id == 0) {
        this.$router.push("/");
      } else if (id == 1) {
        this.$router.push("/new");
      } else if (id == 2) {
        this.$router.push("/poetry");
      } else if (id == 3) {
        console.log("asd");
        this.$router.push("/image");
      }
    },
  },
};
</script>

<style lang='less' scoped>
.van-tabbar--fixed {
  z-index: 10;
}
</style>
